<template>
  <div class="else-detail">
    <div class="one" v-for="item in list" @click="look(item.fileGuid)" title="点击查看附件">
      <viewer><img :src="item.fileGuid" alt="" v-show="filterType(item.picName)===1"></viewer>
      <img v-show="filterType(item.picName)==2" src="../../../../public/img/video.png" alt="">
      <svg v-show="filterType(item.picName)!=1&&filterType(item.picName)!=2" class="icon" aria-hidden="true"
           style="font-size:50px">
        <use :xlink:href="`#${filterType(item.picName)}`"></use>
      </svg>
      <div class="desc">
        <h1 class="more" :title="item.picName">{{item.picName}}</h1>
        <p>{{dealSize(item.fileSize)}}</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "MailFile",
        props: ['list'],
        methods: {
            look(fileGuid) {
                window.open(fileGuid, '_blank')
            },
            //转换文件单位
            dealSize(size) {
                size = size.toString();
                if (size.indexOf('KB') != -1 || size.indexOf('B') != -1 || size.indexOf('MB') != -1) {
                    return size;
                }
                let result = parseInt(size / 1024);
                if (result > 1024) {
                    return parseInt(result / 1024) + 'M';
                }
                return result + 'KB';
            },
            //判断文件类型
            filterType(name) {
                name = name.toLowerCase();
                //截取类型
                let index = name.lastIndexOf(".");
                let fileName = "." + name.substr(index + 1);
                let images = ['.jpg', '.jpeg', '.png', '.gif'];
                let videos = ['.avi', '.mp4', '.wav', '.rm', '.rmvb', '.mov', '.dat', '.wmv', '.3gp', '.amv', '.dmv', '.flv'];
                let files = ['.ppt', '.pptx', '.pdf', '.doc', '.psd', '.txt', '.xls', '.xlsx'];
                //图片判断
                if (images.includes(fileName)) {
                    return 1
                } else if (videos.includes(fileName)) {
                    return 2
                } else if (files.includes(fileName)) {
                    switch (fileName) {
                        case '.ppt':
                            return 'icon-ppt';
                        case '.pptx':
                            return 'icon-ppt';
                        case '.pdf':
                            return 'icon-pdf'
                        case '.doc':
                            return 'icon-doc'
                        case '.psd':
                            return 'icon-psd'
                        case '.txt':
                            return 'icon-txt'
                        case '.xlsx':
                            return 'icon-xlsx'
                        case '.xls':
                            return 'icon-xlsx'
                        default:
                            return 'icon-folder'
                    }
                } else {
                    return 'icon-doc'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .else-detail {
    display: flex;
    flex-wrap: wrap;
    padding: 0 26px;
    .one {
      display: flex;
      margin-bottom: 10px;
      cursor: pointer;

      h1 {
        width: 100px;
        font-size: 12px;
        color: #333;
        font-weight: normal;
        margin-bottom: 10px;
        padding-bottom: 0;
      }

      p {
        font-size: 12px;

      }

      img {
        width: 50px;
        height: 50px;
        margin-right: 5px;
      }

      i {
        font-size: 54px;
      }

      .desc {
        margin-left: 5px;
      }
    }
  }
</style>
